<template>
  <div id="LiveRoom" class="room">
    <div class="buttons">
      <el-tag effect="dark" @click="conf=true"><span>模板配置选项</span></el-tag>
    </div>
    <div class="main flex-row js-between">
      <div class="center op-area" >
        <div style="width:100%;height:600px;position:relative;">
          <div ref="canvasbox" class="canvasbox">
            <div id="mainContainer" ref="mainContainer" class="up s-border">
              <el-tooltip placement="top-end">
                <div slot="content">
                  <p>x:{{ moduleInfo.title.x }}</p>
                  <p>y:{{ moduleInfo.title.y }}</p>
                  <p>宽:{{ moduleInfo.title.w }}</p>
                  <p>高:{{ moduleInfo.title.h }}</p>
                </div>
                <vue-drag-resize

                  ref="titleDrag"
                  :z="199"
                  :parent-h="parentH"
                  :parent-w="parentW"
                  :w="moduleInfo.title.w"
                  :h="moduleInfo.title.h"
                  :x="moduleInfo.title.x"
                  :y="moduleInfo.title.y"
                  :parent-limitation="true"
                  style="text-aline:center;background:#909399;color:#fff;"
                  @resizing="onTextdragg($event)"
                  @dragging="onTextdragg($event)"
                >
                  <span style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)">标题</span>
                </vue-drag-resize>
              </el-tooltip>
              <el-tooltip placement="top-end">
                <div slot="content">
                  <p>x:{{ moduleInfo.video.x }}</p>
                  <p>y:{{ moduleInfo.video.y }}</p>
                  <p>宽:{{ moduleInfo.video.w }}</p>
                  <p>高:{{ moduleInfo.video.h }}</p>
                </div>
                <vue-drag-resize
                  ref="videoDrag"
                  :z="99"
                  :parent-h="parentH"
                  :parent-w="parentW"
                  :w="moduleInfo.video.w"
                  :h="moduleInfo.video.h"
                  :x="moduleInfo.video.x"
                  :y="moduleInfo.video.y"
                  :aspect-ratio="isRect"
                  :parent-limitation="true"
                  style="outline:none;text-aline:center;background:#ecf5ff;border:1px solid #ccc;"
                  @resizing="onVideodragg($event)"
                  @dragging="onVideodragg($event)"
                >
                  <span style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)">视频播放区域</span>
                </vue-drag-resize>
              </el-tooltip>
              <el-tooltip v-for="(item, index) in imgList" :key="index" placement="top-end">
                <div slot="content">
                  <p>x:{{ item.x }}</p>
                  <p>y:{{ item.y }}</p>
                  <p>宽:{{ item.w }}</p>
                  <p>高:{{ item.h }}</p>
                </div>
                <vue-drag-resize
                  ref="drag"
                  :parent-h="parentH"
                  :parent-w="parentW"
                  :w="item.w"
                  :h="item.h"
                  :y="item.y"
                  :x="item.x"
                  :aspect-ratio="isRect"
                  :parent-limitation="true"
                  style="outline:none:border:1px solid #000;"
                  @clicked="activated($event,index)"
                  @deactivated="onDeactivated($event,index)"
                  @resizing="ondragg($event,index)"
                  @dragging="ondragg($event,index)"
                >
                  <img :src="item.value" crossorigin="*" style="width:100%;height:100%;" alt="">
                </vue-drag-resize>
              </el-tooltip>
            </div>
          </div>
        </div>
        <el-drawer
          :visible.sync="conf"
          :with-header="false"
          title=""
          direction="rtl"
          custom-class="drawer"
          size="30%">
          <el-form label-position="left" label-width="140px" >
            <el-form-item label="添加图片：">
              <el-upload
                :show-file-list="false"
                :http-request="uploaddata"
                class="upload-demo"
                action=""
              >
                <el-button >新增图片</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="选择模板尺寸：">
              <el-select v-model="bind_size" class="select" placeholder="选择模板尺寸" @change="changeModule">
                <el-option
                  v-for="item in moduleSize"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="选择视频尺寸：">
              <el-select v-model="bind_videosize" class="select" placeholder="选择视频尺寸" @change="changeVideo">
                <el-option
                  v-for="item in videoSize"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="选择视频拉伸方向：">
              <el-select v-model="moduleInfo.videoBox.fill" class="select" placeholder="选择视频拉伸方向" @change="changeVideo">
                <el-option
                  v-for="item in stretch"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="选择字体：">
              <el-select v-model="moduleInfo.title.font_file" class="select" placeholder="选择字体">
                <el-option
                  v-for="item in fontOption"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="字体大小：">
              <el-input v-model="moduleInfo.title.font_size" style="max-width:250px;" resize="none" placeholder="输入字体大小"/>
            </el-form-item>
            <el-form-item label="文字颜色：">
              <el-color-picker v-model="moduleInfo.title.color"/>
            </el-form-item>
            <el-form-item label="文字阴影宽度：">
              <el-input v-model="moduleInfo.title.shadow" style="max-width:250px;" resize="none" placeholder="输入文字阴影宽度"/>
            </el-form-item>
            <el-form-item label="文字阴影颜色：">
              <el-color-picker v-model="moduleInfo.title.shadow_color"/>
            </el-form-item>
            <el-form-item label="行间距：">
              <el-input v-model="moduleInfo.title.line_space" style="max-width:250px;" resize="none" placeholder="输入行间距"/>
            </el-form-item>
            <el-form-item label="文字边框宽度:">
              <el-input v-model="moduleInfo.title.border_w" style="max-width:250px;" resize="none" placeholder="输入文字边框宽度"/>
            </el-form-item>
            <el-form-item label="文字边框颜色：">
              <el-color-picker v-model="moduleInfo.title.border_color"/>
            </el-form-item>
            <el-form-item label="文字不透明度：">
              <el-slider v-model="moduleInfo.title.alpha" :min="0" :max="10" :format-tooltip="formatTip" style="width:30%;display:inline-block;"/>
            </el-form-item>
            <el-form-item label="图片层级：">
              <el-button class="" @click="toup">
                上移一层
              </el-button>
            </el-form-item>
            <el-form-item label="图片层级：">
              <el-button class="" @click="todown">
                下移一层
              </el-button>
            </el-form-item>
            <el-form-item label="清空：">
              <el-button class="" @click="clean">
                清空模板
              </el-button>
            </el-form-item>
            <el-form-item label="保存：">
              <el-button class="" @click="onSave">
                保存模板
              </el-button>
            </el-form-item>
          </el-form>
        </el-drawer>
      </div>
      <div :style="{'height':computedHeight}" class="right flex-col js-start" style="position: relative;overflow-y: auto;overflow-x: hidden;">
        <div v-for="(item, index) in moduleList" :key="index" class="oneclipinfo">
          <div class="moduleitem">
            <span class="title" style="">模板名称：{{ item.name }}</span>
          </div>
          <div class="moduleitem">
            <span class="imgbox">
              <img :src="item.preview" alt="">
            </span>
            <span class="info">
              <el-button @click="updateModule(item,index)">修改</el-button>
              <el-button @click="deltempl(item.id)">删除</el-button>
            </span>
          </div>
        </div>

      </div>
    </div>
    <!-- 修改弹窗 -->
    <el-dialog v-if="dialogFormVisible" :visible.sync="dialogFormVisible" class="dialog" title="保存模板" style="width: 100%;" close>
      <div class="item cate">
        <el-input v-model="moduleInfo.name" style="max-width:250px;" resize="none" placeholder="输入标题"/>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
        <!-- <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">确定</el-button> -->
        <el-button type="primary" @click="createData">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { apiVideo } from '../../../api/clip/task'
import LocalVideoAreaView from './views/LocalVideoAreaView'
import DivButton from '../../../components/common/DivButton'
import FileUploader from '../../../components/common/FileUploader'
import ObjectUtil from '../../../utils/object-util'
import Fn from '../../../utils/fn'
import { FileUtil } from '../../../utils/file-util'
import Common from '../../../utils/common'
import LiveVideoAreaView from './views/LiveVideoAreaView'
import { ClipListSourceTypeContants, MeterialClipTypeContants } from '../../../mixin/MixinContants'
import VueDragResize from 'vue-drag-resize'
import { apiUpload } from '../../../api/upload'
import html2canvas from 'html2canvas'
import elementResizeDetectorMaker from 'element-resize-detector'

export default {
  name: 'RadioMeterialClipTempel',
  components: {
    LiveVideoAreaView,
    LocalVideoAreaView,
    DivButton,
    FileUploader,
    VueDragResize
  },
  mixins: [
    ClipListSourceTypeContants.mixin,
    MeterialClipTypeContants.mixin
  ],
  data() {
    return {
      computedHeight: 0,
      elemListen: null,
      conf: false,
      addTitle: false,
      isRect: false,
      parentH: 0,
      parentW: 0,
      // 当前选择的图片
      cur_select: '',
      // 模板列表
      moduleList: [],
      selects: [],
      // 模板参数
      moduleInfo: {
        id: undefined,
        name: '',
        canvas: { w: '1080', h: '1920' },
        video: { w: 0, h: 0, x: 0, y: 0 },
        title: {
          w: 200,
          h: 50,
          x: 0,
          y: 30,
          font_file: 'title.ttf',
          color: '',
          // line_char:'',
          font_size: '',
          shadow: '',
          shadow_color: '',
          line_space: '',
          border_w: '',
          border_color: '',
          alpha: 10
        },
        videoBox: {
          fill: 'h',
          boxBlur: '30:20'
        }
        // data:[]

      },
      // 拖拽框初始宽高
      width: '',
      heigth: '',
      // 模板图片的列表
      imgList: [
        // { w: '', h: '', x: '', y: '',type:'img', }
      ],
      // 模板尺寸
      moduleSize: [
        { name: '1280*720', value: JSON.stringify({ w: 1280, h: 720 }) },
        { name: '1080*1920', value: JSON.stringify({ w: 1080, h: 1920 }) },
        { name: '1920*1080', value: JSON.stringify({ w: 1920, h: 1080 }) },
        { name: '720*1280', value: JSON.stringify({ w: 720, h: 1280 }) }
      ],
      // 视频模糊拉伸类型
      stretch: [
        { name: '横向拉伸', value: 'w' },
        { name: '竖向拉伸', value: 'h' }
      ],

      bind_size: JSON.stringify({ w: 1080, h: 1920 }),
      // 视频尺寸
      videoSize: [
        { name: '16:9', value: JSON.stringify({ w: 1920, h: 1080 }) },
        { name: '9:16', value: JSON.stringify({ w: 1080, h: 1920 }) }
      ],
      bind_videosize: JSON.stringify({ w: 1920, h: 1080 }),
      dialogFormVisible: false,
      fontOption: [
        {
          name: '旁门正道标题体',
          value: 'title.ttf'
        },
        {
          name: '阿里巴巴普惠体',
          value: 'Alibaba-PuHuiTi-Bold.ttf'
        }
      ]

    }
  },
  created() {
    this.Init()
  },
  mounted() {
    this.initCanvasInfo()
    this.elemListen = elementResizeDetectorMaker()
    this.elemListen.listenTo(document.querySelector('.op-area'), element => {
      this.$nextTick(() => {
        this.computedHeight = `${element.clientHeight}px`
      })
    })
  },
  methods: {
    formatTip(val) {
      return val / 10
    },
    // 新增标题
    newTitle() {
      this.addTitle = true
    },
    initCanvasInfo() {
      const mainContainer = document.getElementsByClassName('up')[0]
      console.log(this.$refs.videoDrag)
      const result = Common.power2Equalratio(1080, 1920, 'canvasbox')
      mainContainer.style.width = result.W
      mainContainer.style.height = result.H
      this.parentH = result.h
      this.parentW = result.w
      this.moduleInfo.video.w = Number(result.w.toFixed(0))
      this.moduleInfo.video.h = Common.video2Equalratio(1920, 1080, result.w)
      this.moduleInfo.video.y = this.parentH / 2 - this.moduleInfo.video.h / 2
      this.moduleInfo.title.x = this.parentW / 2 - this.moduleInfo.title.w / 2
      this.$nextTick(() => {
        this.isRect = true
      })
    },
    // 视频尺寸
    changeVideo(val) {
      this.isRect = false
      const info = JSON.parse(val)
      if (info.w > info.h) {
        this.moduleInfo.video.w = this.parentW
        this.moduleInfo.video.h = Common.video2Equalratio(info.w, info.h, this.parentW)
      } else {
        this.moduleInfo.video.w = Common.video2Equalratio(info.w, info.h, this.parentH)
        this.moduleInfo.video.h = this.parentH
      }
      this.$nextTick(() => {
        this.isRect = true
      })
    },
    // 模板尺寸
    changeModule(val) {
      const mainContainer = document.getElementsByClassName('up')[0]
      const info = JSON.parse(val)
      this.isRect = false
      this.moduleInfo.video.x = 0
      this.moduleInfo.video.y = 0
      const result = Common.power2Equalratio(info.w, info.h, 'canvasbox')
      mainContainer.style.width = result.W
      mainContainer.style.height = result.H
      this.parentH = result.h
      this.parentW = result.w
      if (info.w > info.h) {
        this.moduleInfo.video.h = result.h
      } else {
        this.moduleInfo.video.w = result.w
      }
      this.$nextTick(() => {
        this.isRect = true
      })
      this.moduleInfo.canvas = info
    },
    activated(e, i) {
      this.cur_select = i
    },

    // 新增一个图片
    uploaddata(data) {
      const that = this
      const form = new FormData()
      form.append('file', data.file)
      apiUpload.upload(form).then(res => {
        if (res.data.resp_code == 0) {
          const img = new Image()
          img.src = res.data.datas.url
          img.onload = function() {
            const w = Number(img.width.toFixed(2))
            const h = Number(img.height.toFixed(2))
            console.log(w, h)
            let show_w, show_h
            if (w > h) {
              show_w = 200
              show_h = Common.video2Equalratio(w, h, 200)
            } else {
              show_w = Common.video2Equalratio(w, h, 200)
              show_h = 200
            }
            const obj = {
              w: show_w,
              h: show_h,
              x: 0,
              y: 0,
              type: 'img',
              layer: 0,
              alpha: 100,
              value: res.data.datas.url
            }
            that.imgList.push(obj)
          }
        } else {
          this.toast.fail(res.data.resp_msg)
        }
      }).catch(err => console.log(err))
    },
    // 图片失焦清空
    onDeactivated(e, i) {
      this.selects = []
      // this.cur_select = ''
    },
    // 图片拖拽
    ondragg(data, index) {
      console.log(data)
      this.imgList[index].w = data.width
      this.imgList[index].h = data.height
      this.imgList[index].x = data.left
      this.imgList[index].y = data.top
    },
    // 标题拖拽
    onTextdragg(data, index) {
      console.log(data)
      this.moduleInfo.title.w = data.width
      this.moduleInfo.title.h = data.height
      this.moduleInfo.title.x = data.left
      this.moduleInfo.title.y = data.top
    },
    // 视频拖拽
    onVideodragg(data) {
      console.log(data)
      this.moduleInfo.video.w = data.width
      this.moduleInfo.video.h = data.height
      this.moduleInfo.video.x = data.left
      this.moduleInfo.video.y = data.top
    },

    // 清空
    clean() {
      this.imgList = []
      this.addTitle = false
    },
    // 校验空选项
    regNotNull() {
      const { canvas, title } = this.moduleInfo
      if (!canvas) {
        this.toast.fail('请选择模板尺寸')
        return false
      } else if (!title.font_file) {
        this.toast.fail('请选择字体')
        return false
      } else if (!title.font_size) {
        this.toast.fail('请输入字体大小')
        return false
      } else if (!title.color) {
        this.toast.fail('请选择文字颜色')
        return false
      } else if (!title.shadow) {
        this.toast.fail('请输入文字阴影宽度')
        return false
      } else if (!title.shadow_color) {
        this.toast.fail('请选择文字阴影颜色')
        return false
      } else if (!title.line_space) {
        this.toast.fail('请输入行间距')
        return false
      } else if (!title.border_w) {
        this.toast.fail('请输入文字边框宽度')
        return false
      } else if (!title.border_color) {
        this.toast.fail('请选择文字边框颜色')
        return false
      }
      return true
    },
    // 保存按钮
    onSave() {
      if (this.regNotNull()) {
        this.dialogFormVisible = true
      }
    },
    // 预览模板
    updateModule(item, index) {
      const canvasdata = JSON.parse(JSON.stringify(item))
      const mainContainer = document.getElementsByClassName('up')[0]
      this.moduleInfo.id = canvasdata.id
      this.moduleInfo.canvas = canvasdata.canvas
      if (canvasdata.videoBox) {
        this.moduleInfo.videoBox = canvasdata.videoBox
      }
      const result = Common.power2Equalratio(canvasdata.canvas.w, canvasdata.canvas.h, 'canvasbox')
      mainContainer.style.width = result.W
      mainContainer.style.height = result.H
      this.parentH = result.h
      this.parentW = result.w

      this.$nextTick(() => {
        this.isRect = false
        const wR = Common.real2now(this.parentW, canvasdata.canvas.w)
        const hR = Common.real2now(this.parentH, canvasdata.canvas.h)
        if (canvasdata.video) {
          canvasdata.video.w = Number(Common.ceilToInt(Number(canvasdata.video.w) * wR))
          canvasdata.video.h = Number(Common.ceilToInt(Number(canvasdata.video.h) * hR))
          canvasdata.video.x = Number(Common.ceilToInt(Number(canvasdata.video.x) * wR))
          canvasdata.video.y = Number(Common.ceilToInt(Number(canvasdata.video.y) * hR))
          this.$set(this.moduleInfo, 'video', canvasdata.video)
        }
        if (canvasdata.title) {
          canvasdata.title.w = Number(Common.ceilToInt(Number(canvasdata.title.w) * wR))
          canvasdata.title.h = Number(Common.ceilToInt(Number(canvasdata.title.h) * hR))
          canvasdata.title.x = Number(Common.ceilToInt(Number(canvasdata.title.x) * wR))
          canvasdata.title.y = Number(Common.ceilToInt(Number(canvasdata.title.y) * hR))
          canvasdata.title.alpha = canvasdata.title.alpha ? Number(canvasdata.title.alpha) * 10 : 10
          this.$set(this.moduleInfo, 'title', canvasdata.title)
        }

        this.$nextTick(() => {
          this.isRect = true
        })
        this.moduleInfo.name = canvasdata.name
        canvasdata.data.forEach(i => {
          i.x = Common.ceilToInt(Number(i.x) * wR)
          i.y = Common.ceilToInt(Number(i.y) * hR)
          i.w = Common.ceilToInt(Number(i.w) * wR)
          i.h = Common.ceilToInt(Number(i.h) * hR)
        })
        this.imgList = canvasdata.data
        if (canvasdata.canvas.h == 720) {
          this.bind_size = JSON.stringify({ w: 1280, h: 720 })
        } else if (canvasdata.canvas.h == 1920) {
          this.bind_size = JSON.stringify({ w: 1080, h: 1920 })
        } else if (canvasdata.canvas.h == 1080) {
          this.bind_size = JSON.stringify({ w: 1920, h: 1080 })
        } else if (canvasdata.canvas.h == 1280) {
          this.bind_size = JSON.stringify({ w: 720, h: 1280 })
        }
      })
    },
    // 删除模板
    deltempl: Fn.Confirm(function(id) {
      apiVideo.delTempl({ id }).then(res => {
        if (res.data.resp_code == 0) {
          this.toast.success('删除成功')
          this.getList()
        } else {
          this.toast.fail(res.data.resp_msg)
        }
      }).catch(err => console.log(err))
    }),
    // 获取模板列表
    getList() {
      // this.deltempl()
      apiVideo.templOptions().then(res => {
        if (res.data.resp_code == 0) {
          this.moduleList = res.data.datas.list
        } else {
          this.toast.fail(res.data.resp_msg)
        }
      }).catch(err => console.log(err))
    },
    // 创建、更新模板
    createData() {
      const loading = this.$loading({
        lock: true,
        text: '请稍等',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const canvasWidth = document.querySelector('.canvasbox').clientWidth
      const canvasHeight = document.querySelector('.canvasbox').clientHeight
      console.log(canvasWidth, canvasHeight)
      const tempModuleInfo = JSON.parse(JSON.stringify(this.moduleInfo))

      const form = {
        ...tempModuleInfo,
        data: this.imgList
      }
      console.log(tempModuleInfo.title, 'title')
      // return
      const rW = Common.now2real(this.parentW, form.canvas.w)
      const rH = Common.now2real(this.parentH, form.canvas.h)
      form.video.w = Common.ceilToInt(form.video.w * rW)
      form.video.h = Common.ceilToInt(form.video.h * rH)
      form.video.x = Common.ceilToInt(form.video.x * rW)
      form.video.y = Common.ceilToInt(form.video.y * rH)
      form.title.w = Common.ceilToInt(form.title.w * rW)
      form.title.h = Common.ceilToInt(form.title.h * rH)
      form.title.x = Common.ceilToInt(form.title.x * rW)
      form.title.y = Common.ceilToInt(form.title.y * rH)
      form.title.alpha = form.title.alpha / 10
      const tempimglist = form.data.map(item => {
        return {
          w: Common.ceilToInt(item.w * rW),
          h: Common.ceilToInt(item.h * rH),
          x: Common.ceilToInt(item.x * rW),
          y: Common.ceilToInt(item.y * rH),
          type: item.type,
          layer: item.layer,
          alpha: item.alpha,
          value: item.value
        }
      })
      console.log(tempimglist, 'jjjj')
      tempimglist.forEach(item => {
        for (const i in item) {
          item[i] = String(item[i])
        }
      })
      for (const i in form.video) {
        form.video[i] = String(form.video[i])
      }
      for (const i in form.title) {
        form.title[i] = String(form.title[i])
      }
      form.canvas.bg = 'black'
      form.canvas.w = String(form.canvas.w)
      form.canvas.h = String(form.canvas.h)
      form.canvas = JSON.stringify(form.canvas)
      form.data = JSON.stringify(tempimglist)
      form.video = JSON.stringify(form.video)
      form.title = JSON.stringify(form.title)
      form.videoBox = JSON.stringify(form.videoBox)
      console.log(form)
      const create = () => {
        apiVideo.createTempl(form).then(res => {
          if (res.data.resp_code == 0) {
            this.toast.success('模板创建成功')
            this.dialogFormVisible = false
            this.conf = false
            this.getList()
            loading.close()
          } else {
            this.toast.fail(res.data.resp_msg)
            loading.close()
          }
        }).catch(err => {
          console.log(err)
          loading.close()
        })
      }
      const update = () => {
        apiVideo.updateTempl(form).then(res => {
          if (res.data.resp_code == 0) {
            this.toast.success('模板更新成功')
            this.dialogFormVisible = false
            this.getList()
            this.moduleInfo.id = ''
            loading.close()
          } else {
            this.toast.fail(res.data.resp_msg)
            loading.close()
          }
        }).catch(err => {
          console.log(err)
          loading.close()
        })
      }
      html2canvas(document.querySelector('.canvasbox'), {
        taintTest: true,
        useCORS: true,
        width: canvasWidth,
        height: canvasHeight
      }).then((canvas) => {
        const imgpath = canvas.toDataURL('image/png', 1.0)
        console.log(imgpath)
        // posterUrl 是否为url地址
        if (imgpath.match(/^data\:image/g)) {
          FileUtil.base64ToBolb(Common._randomString(12) + '.png', imgpath).then(res => {
            FileUtil.updateLoadFile(res).then(res => {
              const data = res.data.datas
              if (ObjectUtil.notNull(data) && ObjectUtil.notNull(data.url)) {
                form.preview = data.url
                this.moduleInfo.id ? update() : create()
              }
            })
          })
        } else {
          this.moduleInfo.id ? update() : create()
        }
      })
    },
    // 上移
    toup() {
      if (this.imgList.length == 0) return this.toast.fail('选择一个图片')
      this.imgList[this.cur_select].layer = 1
    },
    // 下移
    todown() {
      if (this.imgList.length == 0) return this.toast.fail('选择一个图片')
      this.imgList[this.cur_select].layer = 0
    },

    Init() {
      this.getList()
    }

  }
}
</script>
<style >
  .room .el-form-item__content{
    margin-left: 0px !important;
  }
  .margin{
    margin-right: 10px;
  }
  .room .op-area .el-drawer__wrapper .drawer{
    height:100%;
    padding:20px;
    padding-right: 0px;
    overflow: auto;
  }
</style>
<style lang="scss" scoped>

  //noinspection ALL
  video::-internal-media-controls-download-button {
    display:none !important;
  }
  .view-box {
    /*margin: 5px;*/
    padding: 5px;
  }
  .room {
    padding: 10px;
    /*84 = navbar + tags-view = 50 +34 */
    // height: calc(100vh - 84px);
    min-width: 1180px;
    height:auto;
    width: 100%;
    position: relative;
    overflow: auto;
    .header{
      width: 100%;
      overflow: hidden;
      // background: #F2F2F2;
      .title{
          h3{
            width: 100%;
            margin: 0;
            margin-left: 10px;
            padding-bottom: 20px;
            // border-bottom:1px solid #aaa;
          }

      }

    }
    .buttons{
      margin: 10px 0;
      .el-tag{
        cursor: pointer;
      }
    }
    .top {
      height: 70px;
    }
    .main {
      // height: calc(100% - 120px);
      height:100%;
      width: calc(100%);
      .op-area {
        // width: 100%;
        // width:800px;
        // height: 100%;
        // min-width: 640px;
        // height: calc(100vh);
        width:80%;
        max-width: 80%;
        min-width: 60%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .canvasbox{
          position: absolute;
          left:50%;
          top:50%;
          transform: translate(-50%,-50%);
          width:800px;
          height:500px;
          // border: 1px solid #ccc;
          .up {
            // position: relative;
            position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
            // height: calc(100% - 100px);
            // height:500px;
            width:100%;
            height:100%;
            border:.5px solid skyblue;
            // min-height: 480px;
            .video{
              width:100%;
              height:300px;
              background: #ccc;
              position: absolute;
              left:50%;
              top:50%;
              transform: translate(-50%,-50%);
              text-align: center;
              line-height: 300px;

            }
            .vdr{
              border: 1px solid #000;
            }
          }
        }
        .down {
          display: flex;
          flex-wrap: wrap;
          min-height: 100px;
        }
      }
      .right {
        // height:100vh;
        // max-height: calc(100vh);
        width: 50%;
        min-width: 200px;
        // height: calc(100% - 5px);
        padding:10px 0 10px 10px;
        padding-right: 10px;
        overflow: auto;
        .valid {
          border: solid 0.5px red;
        }

        .oneclipinfo{
          margin-bottom: 20px;
          // border-bottom: 2px solid #eee;
          margin-top: 10px;
          // border: 1px solid #ccc;
          // border-radius: 10px;
          padding:10px;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          .moduleitem{
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            .imgbox{
              display: inline-block;
              width:200px;
              height:100px;
              min-width: 150px;
              background:#fff;

              margin-right: 10px;
              img{
                width:100%;
                height:100%;
                border: 1px solid #ccc;
                border-radius: 6px;
              }
            }
            .info{
              display: flex;
              flex-wrap: wrap;
              // p{
              //   margin:6px 0;
              // }
            }
            .cate{
              display: flex;
              flex-wrap: wrap;
              // align-items: center;
              .cate_list{
                display: flex;
                flex-wrap: wrap;
                .list{
                  display: flex;
                  // flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  .select{
                    width:150px;
                    margin-right: 10px;
                    margin-bottom: 5px;
                  }
                }
              }
            }
          }
          .cateinfo{
            display: inherit;
          }
        }
      }
    }
  }
  .s-border {
    // margin: 2px;
    border: solid 1px rgba(1,1,1,0.1);
  }
  .button {
    text-align: center;
    width: auto;
    min-width: 80px;
    height: 50px;
    padding: 10px;
    margin: 0 5px;
  }
  .function {
    text-align: center;
    width: 80px;
    height: 80px;
    padding: 10px 0;
    margin: 5px;
  }
  .setting {
    text-align: center;
    width: 60px;
    height: 60px;
  }
</style>
